<template>
  <el-container>
    <el-main>
      <div class="create-content">
        <div class="back-bar-box mb-30">
          <div class="btn-back" @click="goBack">
            <i class="el-icon-back"></i> 返回
          </div>
          <div class="line"></div>
          <div class="name">新建录播课程</div>
        </div>
        <div class="form">
          <el-form
            :model="ruleForm"
            :rules="rules"
            ref="ruleForm"
            label-width="100px"
            class="demo-ruleForm"
          >
            <el-form-item label="所属分类" prop="region">
              <el-select v-model="ruleForm.region" placeholder="请选择">
                <div v-for="item in categories" :key="item.name">
                  <el-option :label="item.name" :value="item.name"> </el-option>
                  <el-option
                    v-for="v in item.children"
                    :key="v.name"
                    :lable="v.name"
                    :value="'|----' + v.name"
                  >
                  </el-option>
                </div>
              </el-select>
              <el-link type="primary" style="margin-left: 15px"
                >分类管理</el-link
              >
            </el-form-item>

            <el-form-item label="课程名称" prop="name">
              <el-input v-model="ruleForm.name"></el-input>
            </el-form-item>

            <el-form-item label="课程免费" prop="delivery">
              <el-switch v-model="ruleForm.delivery"></el-switch>
              <p class="tip">
                <i class="el-icon-info"></i>
                打开后课程免费学习
              </p>
            </el-form-item>

            <el-form-item label="课程价格" prop="price" class="price">
              <el-input
                v-model="ruleForm.price"
                placeholder="单位：元"
                type="number"
              ></el-input>
              <p class="tip">
                <i class="el-icon-info"></i>
                最小单位“元”，不支持小数
              </p>
            </el-form-item>

            <el-form-item label="课程封面" prop="imgUrl">
              <el-button @click="uploadCover">上传封面</el-button>
              <p class="tip">
                <i class="el-icon-info"></i>
                长宽比4:3，建议尺寸：400x300像素
              </p>
              <div class="chose-img" v-show="isUploadImg">
                <div
                  class="upload-img"
                  :style="{ backgroundImage: `url(${ruleForm.imgUrl})` }"
                ></div>
              </div>
            </el-form-item>

            <el-form-item label="上架时间" prop="date1">
              <el-date-picker
                type="datetime"
                v-model="ruleForm.date1"
                placeholder="请选择日期"
              >
              </el-date-picker>
              <p class="tip">
                <i class="el-icon-info"></i>
                上架时间越早，课程排序越靠后
              </p>
            </el-form-item>

            <el-form-item label="隐藏课程" required prop="hideCourse">
              <el-switch v-model="ruleForm.hideCourse"></el-switch>
              <p class="tip">
                <i class="el-icon-info"></i>
                打开后课程在前台将隐藏显示
              </p>
            </el-form-item>

            <el-form-item label="简短介绍" prop="desc">
              <el-input
                type="textarea"
                v-model="ruleForm.desc"
                autocomplete="off"
                rows="4"
                maxlength="150"
                placeholder="请填写课程简短介绍"
                show-word-limit
              ></el-input>
            </el-form-item>

            <el-form-item
              label="详情介绍"
              required
              prop="detail"
              style="height: 440px"
            >
              <quill-editor
                v-model="ruleForm.detail"
                ref="myQuillEditor"
                :options="editorOption"
                @blur="onEditorBlur($event)"
              >
              </quill-editor>
            </el-form-item>
            <el-form-item>
              <div class="bottom-menus">
                <div class="bottom-menus-box">
                  <div>
                    <el-button
                      type="primary"
                      @click.stop="submitForm('ruleForm')"
                      >确认</el-button
                    >
                  </div>
                  <div class="ml-24">
                    <el-button @click="goToVodIndex">取消</el-button>
                  </div>
                </div>
              </div>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <div class="select-images-box-mask" v-show="isShow">
        <div class="select-images">
          <div class="select-images-title">选择图片</div>
          <div class="select-images-box">
            <div class="category-box">
              <div class="body">
                <div class="category-item active">全部图片</div>
                <div class="category-item">幻灯片</div>
                <div class="category-item">课程封面</div>
                <div class="category-item">课程详情页</div>
                <div class="category-item">文章配图</div>
              </div>
            </div>
            <div class="images-list">
              <div class="optinos">
                <div>
                  <div tabindex="0" class="el-upload el-upload--text">
                    <button
                      type="button"
                      class="el-button upbtn el-button--default"
                    >
                      <span> 上传图片 </span></button
                    ><input
                      type="file"
                      name="file"
                      multiple="multiple"
                      accept="image/gif,image/jpeg,image/jpg,image/png"
                      @change="update($event)"
                      class="el-upload__input"
                    />
                  </div>
                </div>
              </div>
              <div class="body loading">
                <div class="el-loading-mask" style="display: none">
                  <div class="el-loading-spinner">
                    <svg viewBox="25 25 50 50" class="circular">
                      <circle
                        cx="50"
                        cy="50"
                        r="20"
                        fill="none"
                        class="path"
                      ></circle>
                    </svg>
                  </div>
                </div>
                <div
                  class="image-item"
                  v-for="item in imageData"
                  :key="item.id"
                  @click.stop="imageItemActive(item.id, item.url)"
                  :class="{ active: item.id == num }"
                >
                  <div class="sel" id="sel">
                    <img alt="" src="@/assets/home/selected.png" />
                  </div>
                  <div class="image-render">
                    <div
                      class="image-view"
                      :style="{ backgroundImage: `url(${item.url})` }"
                    ></div>
                  </div>
                  <div class="image-name">
                    <div class="name">{{ item && item.name }}</div>
                  </div>
                </div>
              </div>
              <div class="pagination text-center">
                <div class="block">
                  <el-pagination
                    @current-change="handleCurrentChange"
                    :current-page="currentPage1"
                    :page-size="15"
                    layout="total, prev, pager, next, jumper"
                    :total="imageTotal"
                  >
                  </el-pagination>
                </div>
              </div>
            </div>
          </div>
          <div class="select-images-footer">
            <button
              type="button"
              class="el-button footer_btn el-button--primary"
              @click="determine"
            >
              <span> 确定 </span></button
            ><button
              type="button"
              class="el-button footer_btn ml-30 el-button--default"
              @click="cancel"
            >
              <span> 取消 </span>
            </button>
          </div>
        </div>
      </div>
    </el-main>
    <el-footer> </el-footer>
  </el-container>
</template>

<script>
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
import { quillEditor } from "vue-quill-editor";
import http from "@/network/http.js";
import {
  create,
  courseImage,
  updateImage,
  createCourse,
} from "@/network/course";
import { Loading } from "element-ui";
export default {
  components: {
    quillEditor,
  },
  data() {
    // 日期的校验
    var checkDate = (rule, value, callback) => {
      if (value === "") {
        return callback(new Error("上架时间不能为空"));
      } else {
        return callback();
      }
    };
    return {
      ruleForm: {
        name: "",
        region: "",
        price: "",
        date1: "",
        delivery: false,
        hideCourse: false,
        desc: "",
        detail: "",
        imgUrl: "",
      },
      rules: {
        name: [{ required: true, message: "课程名不能为空", trigger: "blur" }],
        region: [{ required: true, trigger: "blur" }],
        date1: [
          {
            validator: checkDate,
            required: true,
            trigger: ["blur", "change"],
          },
        ],
        imgUrl: [
          {
            required: true,
            message: "封面不能为空",
            trigger: "blur",
          },
        ],
        price: [{ required: true, message: "价格不能为空", trigger: "blur" }],
        desc: [
          { required: true, message: "简短介绍不能为空", trigger: "blur" },
        ],
        detail: [
          { required: true, message: "详情介绍不能为空", trigger: "change" },
        ],
      },
      isShow: false,
      isUploadImg: false,
      // 富文本编辑器工具栏重定义
      editorOption: {
        modules: {
          toolbar: [
            ["bold", "italic", "underline", "strike"], //加粗，斜体，下划线，删除线
            ["blockquote", "code-block"], //引用，代码块

            [{ list: "ordered" }, { list: "bullet" }], //列表

            [{ size: ["small", false, "large", "huge"] }], // 字体大小
            [{ header: [1, 2, 3, 4, 5, 6, false] }], //几级标题

            [{ color: [] }, { background: [] }], // 字体颜色，字体背景颜色
            [{ align: [] }], //对齐方式

            ["clean"], //清除字体样式
            ["link", "image", "video"], //上传图片、上传视频
          ],
        },
        placeholder: "请输入内容...",
      },
      categories: [],
      currentPage1: 1,
      imagePage: 1,
      imageFrom: 0,
      imageTotal: 0,
      imageData: [],
      num: 0,
      categoryId: 0,
      id: 0,
      editCourse: [],
      editId: 0,
      createdTime: "",
      updatedTime: "",
    };
  },
  methods: {
    uploadCover: function () {
      this.isShow = true;
    },
    onEditorBlur(editor) {},
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.imagePage = val;
      this.getImageData();
    },
    // 转成表单格式的图片
    update: function (e) {
      let file = e.target.files[0];
      let formData = new FormData();
      formData.append("file", file);
      formData.append("from", this.imageFrom);
      updateImage(formData)
        .then((res) => {
          //   console.log(res);
          this.getImageData();
        })
        .catch((error) => {
          console.log(error);
        });
    },

    getImageData: function () {
      // this.loading && this.loading.close();
      let loading = Loading.service({
        target: ".loading",
      });
      courseImage({
        params: {
          page: this.imagePage,
          size: 15,
          from: this.imageFrom,
        },
      }).then((res) => {
        if (res.status === 0) {
          this.imageData = res?.data?.data?.data;
          // console.log(this.imageData);
          this.imageTotal = res?.data?.data?.total;
          loading.close();
        }
      });
    },
    imageItemActive: function (id, url) {
      this.num = id;
      this.ruleForm.imgUrl = url;
      // console.log(this.imgUrl);
    },
    determine: function () {
      if (this.ruleForm.imgUrl == "") {
        this.$message({
          message: "请选择图片",
          type: "warning",
        });
        this.isUploadImg = false;
        this.isShow = true;
      } else {
        this.isUploadImg = true;
        this.isShow = false;
      }
    },
    cancel: function () {
      this.isShow = false;
      this.num = 0;
    },
    // 获取分类的id
    getTypeId: function () {
      for (let i = 0; i < this.categories.length; i++) {
        if (this.categories[i].children.length == 0) {
          if (this.ruleForm.region.includes(this.categories[i].name)) {
            this.categoryId = this.categories[i].id;
            return;
          }
        } else {
          for (let j = 0; j < this.categories[i].children.length; j++) {
            if (
              this.ruleForm.region.includes(this.categories[i].children[j].name)
            ) {
              this.categoryId = this.categories[i].children[j].id;
              return;
            } else if (this.ruleForm.region.includes(this.categories[i].name)) {
              this.categoryId = this.categories[i].id;
              return;
            }
          }
        }
      }
    },
    getTypeName: function () {
      for (let i = 0; i < this.categories.length; i++) {
        if (this.categories[i].children.length == 0) {
          if (this.editId == this.categories[i].id) {
            this.ruleForm.region = this.categories[i].name;
            return;
          }
        } else {
          for (let j = 0; j < this.categories[i].children.length; j++) {
            if (this.editId == this.categories[i].children[j].id) {
              this.ruleForm.region = this.categories[i].children[j].name;
              return;
            } else if (this.editId == this.categories[i].id) {
              this.ruleForm.region = this.categories[i].name;
              return;
            }
          }
        }
      }
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          console.log("成功");
          this.getTypeId();
          // console.log(this.categoryId);
          let params = {
            category_id: this.categoryId,
            id: this.id,
            charge: this.ruleForm.price,
            created_at: this.createdTime,
            updated_at: this.updatedTime,
            seo_description: "",
            seo_keywords: "",
            is_free: this.ruleForm.delivery == true ? 1 : 0,
            is_show: this.ruleForm.hideCourse == false ? 1 : 0,
            is_rec: 0,
            original_desc: `<p>${this.ruleForm.detail}</p>`,
            published_at: this.ruleForm.date1,
            render_desc: `<p>${this.ruleForm.detail}</p>`,
            short_description: this.ruleForm.desc,
            thumb: this.ruleForm.imgUrl,
            title: this.ruleForm.name,
            slug: "",
            user_count: 0,
            user_id: 0,
          };
          http.put(`/course/${this.id}`, params).then((res) => {
            console.log("修改成功");
            this.$router.push({
              path: "/course/vod/index",
            });
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    goToVodIndex: function () {
      this.$router.push({
        path: "/course/vod/index",
      });
    },
    goBack: function () {
      this.$router.push({
        path: "/course/vod/index",
      });
    },
  },
  computed: {
    editor() {
      return this.$refs.myQuillEditor.quill;
    },
  },
  created() {
    create().then((res) => {
      this.categories = res?.data?.categories;
    });
    this.getImageData();
    this.id = location.href.split("?")[1].split("=")[1];
    http
      .get(`/course/${this.id}`)
      .then((res) => {
        this.editCourse = res.data;
        // console.log(res.data);
        this.editId = this.editCourse.category_id;
        this.getTypeName();
        this.ruleForm.name = this.editCourse.title;
        this.ruleForm.delivery = this.editCourse.is_free == 0 ? false : true;
        this.ruleForm.price = this.editCourse.charge;
        this.ruleForm.imgUrl = this.editCourse.thumb;
        this.isUploadImg = this.ruleForm.imgUrl == " " ? false : true;
        this.ruleForm.date1 = this.editCourse.published_at;
        this.ruleForm.hideCourse = this.editCourse.is_show == 0 ? true : false;
        this.ruleForm.desc = this.editCourse.short_description;
        this.ruleForm.detail = this.editCourse.original_desc;
        this.createdTime = this.editCourse.created_at;
        this.updatedTime = this.editCourse.updated_at;
      })
      .catch((error) => {
        console.log(error);
      });
  },
};
</script>

<style lang="scss" scoped>
.el-container {
  height: 100%;
  text-align: center;
}
.el-main {
  background-color: #f1f2f9;
  //   line-height: 200px;
  .create-content {
    width: 100%;
    height: auto;
    float: left;
    background-color: #fff;
    box-sizing: border-box;
    padding: 30px;
    border-radius: 15px;
    margin-bottom: 90px;
    box-shadow: 0 2px 4px 0 hsl(0deg 0% 40% / 5%);
    min-width: 1180px;
    .back-bar-box {
      width: 100%;
      height: auto;
      float: left;
      display: flex;
      align-items: center;
      margin-bottom: 30px;
      .btn-back {
        font-size: 14px;
        font-weight: 400;
        color: #333;
        cursor: pointer;
        i.el-icon-back {
          font-family: element-icons !important;
          //   speak: none;
          font-style: normal;
          font-weight: 400;
          font-variant: normal;
          text-transform: none;
          line-height: 1;
          vertical-align: baseline;
          display: inline-block;
          -webkit-font-smoothing: antialiased;
        }
      }

      .line {
        width: 1px;
        height: 14px;
        background-color: #d8d8d8;
        margin-right: 15px;
        margin-left: 15px;
      }

      .name {
        font-size: 14px;
        font-weight: 600;
        color: #333;
      }
    }
    .form {
      margin-top: 51px;
      ::v-deep .el-form-item__content {
        text-align: left;
        margin-left: 200px !important;
      }
      ::v-deep .el-form-item__label {
        width: 200px !important;
      }
      // ::v-deep .el-form-item__error {
      //   left: 100px;
      // }
      .el-select {
        width: 300px;
      }
      .el-input {
        width: 300px;
      }
      .tip {
        display: inline-block;
        margin-left: 10px;
        font-size: 14px;
        color: rgba(0, 0, 0, 0.5);
        i {
          margin-right: 2px;
        }
      }
      .chose-img {
        margin-top: 15px;
        .upload-img {
          width: 200px;
          height: 150px;
          overflow: hidden;
          background-position: 50%;
          background-size: cover;
          background-repeat: no-repeat;
        }
      }
      .price {
        .el-input {
          width: 200px;
        }
      }
      .el-textarea {
        width: 800px;
      }
      ::v-deep .quill-editor {
        height: 400px;
        width: 800px;
        margin-bottom: 42px;
        .ql-toolbar.ql-snow {
          padding: 0;
          border: 1px solid #dcdfe6;
          border-radius: 4px 4px 0 0;
        }
        .ql-toolbar.ql-snow .ql-picker-label {
          display: flex;
          align-items: center;
          color: #ccc;
        }
        .ql-snow .ql-stroke {
          stroke: #ccc;
        }
        .ql-snow .ql-fill {
          fill: #ccc;
        }
        .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke,
        .ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke,
        .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter,
        .ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter,
        .ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke,
        .ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke,
        .ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke-miter,
        .ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke-miter,
        .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke,
        .ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke,
        .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter,
        .ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter,
        .ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke,
        .ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke,
        .ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke-miter,
        .ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke-miter,
        .ql-snow.ql-toolbar button.ql-active .ql-stroke,
        .ql-snow .ql-toolbar button.ql-active .ql-stroke,
        .ql-snow.ql-toolbar button.ql-active .ql-stroke-miter,
        .ql-snow .ql-toolbar button.ql-active .ql-stroke-miter,
        .ql-snow.ql-toolbar button:focus .ql-stroke,
        .ql-snow .ql-toolbar button:focus .ql-stroke,
        .ql-snow.ql-toolbar button:focus .ql-stroke-miter,
        .ql-snow .ql-toolbar button:focus .ql-stroke-miter,
        .ql-snow.ql-toolbar button:hover .ql-stroke,
        .ql-snow .ql-toolbar button:hover .ql-stroke,
        .ql-snow.ql-toolbar button:hover .ql-stroke-miter,
        .ql-snow.ql-toolbar button:focus .ql-fill,
        .ql-snow .ql-toolbar button:hover .ql-stroke-miter {
          stroke: #06c;
        }
        .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-fill,
        .ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-fill,
        .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill,
        .ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill,
        .ql-snow.ql-toolbar .ql-picker-item:hover .ql-fill,
        .ql-snow .ql-toolbar .ql-picker-item:hover .ql-fill,
        .ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill,
        .ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill,
        .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-fill,
        .ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-fill,
        .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill,
        .ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill,
        .ql-snow.ql-toolbar .ql-picker-label:hover .ql-fill,
        .ql-snow .ql-toolbar .ql-picker-label:hover .ql-fill,
        .ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill,
        .ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill,
        .ql-snow.ql-toolbar button.ql-active .ql-fill,
        .ql-snow .ql-toolbar button.ql-active .ql-fill,
        .ql-snow.ql-toolbar button.ql-active .ql-stroke.ql-fill,
        .ql-snow .ql-toolbar button.ql-active .ql-stroke.ql-fill,
        .ql-snow.ql-toolbar button:focus .ql-fill,
        .ql-snow .ql-toolbar button:focus .ql-fill,
        .ql-snow.ql-toolbar button:focus .ql-stroke.ql-fill,
        .ql-snow .ql-toolbar button:focus .ql-stroke.ql-fill,
        .ql-snow.ql-toolbar button:hover .ql-fill,
        .ql-snow .ql-toolbar button:hover .ql-fill,
        .ql-snow.ql-toolbar button:hover .ql-stroke.ql-fill,
        .ql-snow .ql-toolbar button:hover .ql-stroke.ql-fill {
          fill: #06c;
        }
        .ql-container.ql-snow {
          border: 1px solid #dcdfe6;
          border-top: transparent;
          border-radius: 0 0 4px 4px;
        }
        .ql-editor.ql-blank::before {
          color: #ccc;
          font-style: normal;
        }
      }
    }
  }
  .select-images-box-mask {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2002;
    background-color: rgba(0, 0, 0, 0.5);
    .select-images {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 881px;
      height: 674px;
      background: #fff;
      margin-top: -337px;
      margin-left: -440.5px;
      box-sizing: border-box;
      .select-images-title {
        width: 100%;
        height: 70px;
        float: left;
        box-sizing: border-box;
        padding: 26px 30px;
        font-size: 18px;
        font-weight: 400;
        color: #333;
        line-height: 18px;
        text-align: left;
      }

      .select-images-box {
        width: 100%;
        height: 534px;
        float: left;
        display: flex;
        box-sizing: border-box;
        padding-left: 0;
        padding-right: 30px;
        padding-bottom: 0;
        .category-box {
          width: 150px;
          height: auto;
          margin-right: 30px;
          border-right: 1px solid #d8d8d8;
          border-radius: 3px;
          .body {
            width: 100%;
            height: auto;
            float: left;
            .category-item.active {
              background-color: rgba(60, 167, 250, 0.1);
              color: #333;
            }

            .category-item {
              width: 100%;
              height: auto;
              float: left;
              box-sizing: border-box;
              padding-left: 30px;
              padding-right: 30px;
              padding-top: 15px;
              padding-bottom: 15px;
              cursor: pointer;
              font-size: 15px;
              line-height: 15px;
              color: #333;
            }
          }
        }

        .images-list {
          flex: 1;
          .optinos {
            width: 100%;
            height: 40px;
            float: left;
            margin-bottom: 15px;
            text-align: right;
            div {
              .el-upload {
                display: inline-block;
                text-align: center;
                cursor: pointer;
                outline: 0;
                button.el-button {
                  width: 116px;
                  position: absolute;
                  top: 15px;
                  right: 30px;
                  // span {
                  // }
                }

                input.el-upload__input {
                  opacity: 0;
                  width: 116px;
                  height: 40px;
                  position: absolute;
                  top: 15px;
                  right: 30px;
                }
              }
            }
          }

          .body {
            width: 100%;
            margin-top: -55px;
            height: auto;
            box-sizing: border-box;
            padding: 0;
            float: left;
            display: grid;
            row-gap: 27px;
            -moz-column-gap: 30px;
            column-gap: 30px;
            grid-template-columns: repeat(5, minmax(0, 1fr));
            .el-loading-mask {
              position: absolute;
              z-index: 2000;
              background-color: hsla(0, 0%, 100%, 0.9);
              margin: 0;
              top: 0;
              right: 0;
              bottom: 0;
              left: 0;
              transition: opacity 0.3s;
              .el-loading-spinner {
                top: 50%;
                margin-top: -21px;
                width: 100%;
                text-align: center;
                position: absolute;
                // svg.circular {
                //   circle.path {
                //   }
                // }
              }
            }

            .image-item {
              width: 110px;
              min-height: 142px;
              background: #f4fafe;
              box-sizing: border-box;
              cursor: pointer;
              position: relative;
              .sel {
                display: none;
                position: absolute;
                width: 30px;
                height: 30px;
                top: 58px;
                left: 40px;
                img {
                  width: 30px;
                  height: 30px;
                }
              }
              .image-render {
                height: 110px;
                display: flex;
                justify-content: center;
                align-items: center;
                .image-view {
                  width: 100%;
                  height: 110px;
                  background-repeat: no-repeat;
                  background-size: contain;
                  background-position: 50%;
                }
              }

              .image-name {
                width: 110px;
                height: auto;
                padding: 10px 5px;
                box-sizing: border-box;
                .name {
                  width: 100px;
                  height: 15px;
                  font-size: 10px;
                  font-weight: 400;
                  color: #333;
                  line-height: 15px;
                  text-align: center;
                  white-space: nowrap;
                  overflow: hidden;
                  text-overflow: ellipsis;
                }
              }
            }
            .image-item.active .sel {
              display: block;
            }
            .image-item.active,
            .image-item:hover {
              background: #fff;
              border: 2px solid #3ca7fa;
              border-bottom: none;
            }
            .image-item:hover .image-render,
            .image-item.active .image-render {
              background-color: rgba(60, 167, 250, 0.2);
              width: 106px;
              height: 110px;
            }
            .image-item.active .image-name,
            .image-item:hover .image-name {
              width: 110px;
              height: auto;
              padding: 0;
              display: flex;
              padding: 10px 5px;
              top: 110px;
              left: -2px;
              position: absolute;
              z-index: 10;
              background-color: #d8edfe;
              border: 2px solid #3ca7fa;
              border-top: none;
            }
            .image-item.active .image-name .name,
            .image-item:hover .image-name .name {
              width: 96px;
              height: auto;
              word-wrap: break-word;
              white-space: unset;
              text-overflow: unset;
              overflow: unset;
            }
          }

          .pagination {
            width: 100%;
            height: auto;
            float: left;
            margin-top: 12px;
            text-align: center;
            .block {
              //   span.demonstration {
              //   }

              el-pagination {
                white-space: nowrap;
                padding: 2px 5px;
                color: #303133;
                font-weight: 700;
              }
            }
          }
        }
      }

      .select-images-footer {
        width: 100%;
        height: auto;
        float: left;
        box-sizing: border-box;
        padding: 15px 30px;
        box-shadow: 0 -2px 4px 0 hsl(0deg 0% 40% / 5%);
        text-align: left;
        button.el-button.footer_btn.el-button--primary {
          width: 88px;
          // span {
          // }
        }

        button.el-button.footer_btn.ml-30.el-button--default {
          width: 88px;
          margin-left: 30px;
          // span {
          // }
        }
      }
    }
  }
}
.bottom-menus {
  width: 100%;
  height: 1px;
  float: left;
  .bottom-menus-box {
    position: fixed;
    bottom: 0;
    left: 200px;
    right: 0;
    z-index: 2000;
    box-sizing: border-box;
    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 20px;
    background-color: #fff;
    display: flex;
    box-shadow: 0 -2px 4px 0 hsl(0deg 0% 40% / 5%);

    .ml-24 {
      margin-left: 24px;
    }
  }
}
</style>